<script setup>

import {onMounted, ref} from "vue";
import {Refresh, Search} from "@element-plus/icons-vue";
import axios from "axios";

// 模糊查询条件
let title=ref()
let status=ref()
let realname=ref()


const formLabelWidth = '140px'
let dialogFormVisibleAdd =ref(false)
let dialogFormVisibleUpd =ref(false)
let dialogFormVisibleDel =ref(false)

// 状态数组
let options=ref(["已支付","未支付","取消"])

// 删除的编号
let num=ref(0)
let numArr=ref([])

//判断修改框和添加框
let str1=ref("")
let str2=ref("添加新购买记录")
let str3=ref("")
let str4=ref("确定删除该条数据吗?")

let tableData=ref([{
  course_id:1
}])

//课程数组
let courseArr=ref([])
//会员数组
let memberArr=ref([])
//表单
let form=ref({

  purchaseId:0,
  course:{
    courseId:0,
    title:""
  },
  member:{
    memberId:0,
    realname:""
  },
  purchasePrice:"",
  purchaseTime:null,
  status:""

})

//添加新购买记录
const addBuyCourse1=()=>{
  str1.value="添加新购买记录"
  form.value={
    purchaseId:0,
    course:{
      courseId:0,
      title:""
    },
    member:{
      memberId:0,
      realname:""
    },
    purchasePrice:"",
    purchaseTime:null,
    status:""
  }
  dialogFormVisibleAdd.value=true;
}
const addBuyCourse2=()=>{
  console.log(form.value)
  for (const course of courseArr.value) {
    if (course.title===form.value.course.title){
      form.value.course.courseId=course.courseId;
    }
  }
  for (const member of memberArr.value){
    if (member.realname===form.value.member.realname){
      form.value.member.memberId=member.memberId;
    }
  }
  console.log(form.value)
  axios.post("/coursepurchase",form.value)
      .then(res=>{
        console.log(res.data)
        findAll()
      })
      .catch(err=>console.log(err))
  console.log("添加成功")
  dialogFormVisibleAdd.value=false;
}

//修改购买记录
const changeBuyCourse1=(obj)=>{

  str1.value="修改购买记录"
  form.value=obj;
  dialogFormVisibleAdd.value=true;
}

const changeBuyCourse2=()=>{

  for (const course of courseArr.value) {
    if (course.title===form.value.course.title){
      form.value.course.courseId=course.courseId;
    }
  }
  for (const member of memberArr.value){
    if (member.realname===form.value.member.realname){
      form.value.member.memberId=member.memberId;
    }
  }
  axios.put("/coursepurchase",form.value)
      .then(res=>{
        console.log(res.data)
        findAll()
      })
      .catch(err=>console.log(err))
  console.log("修改成功")
  dialogFormVisibleAdd.value=false;
}

//删除购买记录
const deleteBuyCourse1=(purchaseId)=>{

  num.value=purchaseId;
  str3.value="确定删除该条数据吗?"
  dialogFormVisibleDel.value=true;
}
const deleteBuyCourse2=()=>{
  // console.log(num.value)
  // console.log("删除成功")
  axios.delete("/coursepurchase",{
    params:{purchaseId:num.value}
  })
      .then(res=>{
        console.log(res.data)
        findAll()
      })
      .catch(err=>console.log(err))
  dialogFormVisibleDel.value=false;
}
// 批量删除购买记录
const deleteSelect1=(purchaseId)=>{

  str3.value="确定删除选中的所有数据吗?"
  dialogFormVisibleDel.value=true;
}
const deleteSelect2=()=>{
  // console.log("批量删除成功")
  axios.delete("/coursepurchase/select",{
    data:numArr.value
  })
      .then(res=>{
        console.log(res.data)
        findAll()
      })
      .catch(err=>console.log(err))
  dialogFormVisibleDel.value=false;
}

//模糊查询
const search=()=>{

  console.log(status.value)
  findAll()
}

//重置搜索
const resetSearch=()=>{

  title.value=null
  status.value=null
  realname.value=null
  findAll()
}

//查询所有的购买记录
const findAll=()=>{
  axios.get("/coursepurchase",{
    params:{
      title:title.value,
      status:status.value,
      realname:realname.value
    }

  })
      .then(res=>{
        console.log(res.data.data)
        tableData.value=res.data.data
      })
      .catch(err=>{console.log(err)})
}
// 查询所有的课程数组
const findCourse=()=>{
  axios.get("/course",{
    params:{
      pageNum:1,
      pageSize:10000
    }
  })
      .then(res=>{
        courseArr.value=res.data.data.list
        console.log(courseArr.value)
      })
      .catch(err=>console.log(err))
}
//查询所有的员工数组
const findMember=()=>{
  axios.get("/member/all")
      .then(res=>{
        memberArr.value=res.data.data
        console.log(memberArr.value)
      })
      .catch(err=>console.log(err))
}

// 展示动态选择的数据
const showArr=(selection)=>{
  numArr.value=[];
  for (const s of selection) {
    numArr.value.push(s.purchaseId)
  }
  console.log(numArr.value)
}

onMounted(()=>{
  findAll()
  findCourse()
  findMember()
})



</script>

<template>


  <div class="top">
    会员用户名 <el-input v-model="realname" style="width: 240px" placeholder="请输入会员用户名" />
    课程名称 <el-input v-model="title" style="width: 240px" placeholder="请输入课程名称" />
    购买状态 <el-select v-model="status" placeholder="选择状态" style="width: 240px">
             <el-option v-for="(value,index) in options" :key="index" :label="value" :value="value"/>
  </el-select>


    <el-button type="primary" style="margin-left: 20px" @click="search" :icon="Search">搜索</el-button>

    <el-button type="warning" style="margin-left: 20px" @click="resetSearch" :icon="Refresh">重置</el-button>
  </div>


  <div class="table">

    <div class="tar">
      <el-button type="primary" plain @click="addBuyCourse1">添加</el-button>
      <el-button type="danger" plain @click="deleteSelect1">批量删除</el-button>
    </div>

    <el-table :data="tableData" @selection-change="showArr" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column property="purchaseId" label="购买编号"  />
      <el-table-column property="course.title" label="课程名称"  />
      <el-table-column property="member.realname" label="会员用户名" />
      <el-table-column property="purchasePrice" label="购买价格"  />
      <el-table-column property="purchaseTime" label="购买时间"  />
      <el-table-column property="status" label="状态" />
      <el-table-column property="" label="操作" width="180" >
        <template #default="scope">
          <el-button type="warning" round @click="changeBuyCourse1(scope.row)">修改</el-button>
          <el-button type="danger" round @click="deleteBuyCourse1(scope.row.purchaseId)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

    <!--    添加/修改购买记录-->
    <el-dialog v-model="dialogFormVisibleAdd" :title="str1" width="500">
      <el-form :model="form">
        <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-select v-model="form.course.title" autocomplete="off" placeholder="选择课程">
            <el-option v-for="(value,index) in courseArr" :key="index" :label="value.title" :value="value.title"/>
          </el-select>
        </el-form-item>
        <el-form-item label="会员名称" :label-width="formLabelWidth">
          <el-input v-model="form.member.realname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="购买价格" :label-width="formLabelWidth">
          <el-input v-model="form.purchasePrice" autocomplete="off" />
        </el-form-item>
        <!--      状态下拉框-->

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择状态" >
            <el-option v-for="(value,index) in options" :key="index" :label="value" :value="value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleAdd= false">取消</el-button>
          <el-button type="primary" @click="(str1===str2)?addBuyCourse2():changeBuyCourse2()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogFormVisibleDel" title="删除信息" width="500" draggable>
      <span>{{ str3 }}</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleDel = false">取消</el-button>
          <el-button type="primary" @click="(str3===str4)?deleteBuyCourse2():deleteSelect2()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>


  </div>

</template>

<style scoped>
.top{
  padding: 20px 0;
  margin:0 20px;
}

.table{
  padding: 20px 0;
  margin: 0 20px;
}

.tar{
  margin-bottom: 30px;
}


</style>